/* ==========================================================
   Credentials: The Foundation Our Leaders Built On
   File: wwwroot/css/leadership-credentials.css
   Used by: Views/Partials/blocklist/Components/leadershipCredentialsBlock.cshtml
   ========================================================== */
.ld-cred {
  --lc-navy: #14256b;
  --lc-orange: #ff9a45;
  --lc-gutter: 4.3vw;
  --lc-ease: cubic-bezier(.65, 0, .35, 1);
  --lc-ease-out: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  width: 100%;
  padding: clamp(28px, 2.6vw, 68px) var(--lc-gutter) clamp(36px, 5.6vw, 140px);
  background: linear-gradient(100deg, #e9ecfb 0%, #f3eef3 38%, #fbe7da 75%, #fcd8bd 100%);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--lc-navy);
  -webkit-font-smoothing: antialiased;
}
.ld-cred *, .ld-cred *::before, .ld-cred *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- heading ---------- */
.ld-cred__head { margin-bottom: clamp(22px, 2.9vw, 74px); }
.ld-cred__eyebrow {
  margin-bottom: clamp(12px, 1.9vw, 48px);
  font-size: clamp(11px, .8vw, 20px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ld-cred__heading { font-size: clamp(24px, 2.1vw, 54px); font-weight: 600; line-height: 1.32; color: var(--lc-navy); }

/* ---------- cards ---------- */
.ld-cred__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.75vw, 44px); }
.ld-cred__card {
  position: relative;
  aspect-ratio: 2.07 / 1;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  outline: none;
  background: var(--lc-navy);
}
.ld-cred__card:focus-visible { box-shadow: 0 0 0 2px var(--lc-orange); }

/* photo (one image, or up to three cut on the diagonal) */
.ld-cred__media { position: absolute; inset: 0; z-index: -2; }
.ld-cred__slice { position: absolute; inset: 0; overflow: hidden; }
.ld-cred__slice img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s var(--lc-ease-out);
}
.ld-cred__card.is-active .ld-cred__slice img { transform: scale(1.07); }
/* 2 images: two diagonal strips. 3 images: three strips (like the Global Delivery card).
   Each slice box only covers its strip, so every photo is centred in its own strip. */
.ld-cred__media--2 .ld-cred__slice:nth-child(1) { right: 42%; clip-path: polygon(0 0, 100% 0, 79.3% 100%, 0 100%); }
.ld-cred__media--2 .ld-cred__slice:nth-child(2) { left: 46%; clip-path: polygon(22.2% 0, 100% 0, 100% 100%, 0 100%); }
.ld-cred__media--3 .ld-cred__slice:nth-child(1) { right: 60%; clip-path: polygon(0 0, 100% 0, 65% 100%, 0 100%); }
.ld-cred__media--3 .ld-cred__slice:nth-child(2) { left: 26%; right: 24%; clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%); }
.ld-cred__media--3 .ld-cred__slice:nth-child(3) { left: 62%; clip-path: polygon(36.8% 0, 100% 0, 100% 100%, 0 100%); }

/* washes: navy by default, orange on the active card (cross-fade, no jump) */
.ld-cred__navy,
.ld-cred__orange { position: absolute; inset: 0; z-index: -1; transition: opacity .8s ease; }
.ld-cred__navy { background: linear-gradient(90deg, rgba(20, 37, 107, .95) 0%, rgba(20, 37, 107, .82) 30%, rgba(20, 37, 107, .45) 62%, rgba(20, 37, 107, .1) 100%); }
.ld-cred__orange { background: linear-gradient(90deg, rgba(238, 140, 66, .97) 0%, rgba(240, 148, 76, .9) 22%, rgba(240, 150, 80, .45) 45%, rgba(240, 150, 80, 0) 68%); opacity: 0; }
.ld-cred__card.is-active .ld-cred__orange { opacity: 1; }
.ld-cred__card.is-active .ld-cred__navy { opacity: 0; }

.ld-cred__body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(18px, 2.1vw, 54px) clamp(18px, 2.6vw, 66px) clamp(18px, 2.4vw, 60px);
}
.ld-cred__label { font-size: clamp(11px, .8vw, 20px); font-weight: 400; opacity: .9; }
.ld-cred__main { margin-top: auto; margin-bottom: auto; padding-top: 8px; max-width: 70%; }
.ld-cred__stat {
  font-size: clamp(26px, 2.15vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  transition: transform .8s var(--lc-ease-out);
}
.ld-cred__text {
  margin-top: clamp(4px, .5vw, 12px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, .85vw, 22px);
  line-height: 1.55;
  opacity: .92;
}
.ld-cred__card.is-active .ld-cred__stat { transform: translateY(-3px); }
.ld-cred__bar {
  display: block;
  width: clamp(18px, 2.3vw, 58px);
  height: 2px;
  background: var(--lc-orange);
  transform-origin: left center;
  transition: transform .7s var(--lc-ease-out), opacity .5s ease;
}
.ld-cred__card.is-active .ld-cred__bar { transform: scaleX(1.8); opacity: 0; }

/* ---------- entrance ---------- */
.ld-cred.js-reveal .ld-cred__fx { opacity: 0; transform: translateY(24px); }
.ld-cred.js-reveal.is-visible .ld-cred__fx {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease var(--fd, 0s), transform 1.2s var(--lc-ease-out) var(--fd, 0s);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .ld-cred { --lc-gutter: 32px; } }
@media (max-width: 900px) { .ld-cred { --lc-gutter: 24px; } .ld-cred__main { max-width: 80%; } }
@media (max-width: 700px) {
  .ld-cred { --lc-gutter: 20px; }
  .ld-cred__grid { grid-template-columns: 1fr; }
  .ld-cred__card { aspect-ratio: auto; min-height: 210px; }
  .ld-cred__main { max-width: 100%; }
}